<div class="gh-flow">

    <div class="gh-flow-content-wrap">
        <section class="gh-flow-content">
            <header>
                <h1>Create your account</h1>
            </header>

            <form id="signup" class="gh-flow-create" method="post" novalidate="novalidate" onsubmit={{action "submit"}}>
                {{gh-profile-image email=signupDetails.email setImage=(action "setImage")}}

                {{#gh-form-group errors=signupDetails.errors hasValidated=signupDetails.hasValidated property="name"}}
                    <label for="name">Full name</label>
                    <span class="gh-input-icon gh-icon-user">
                        {{svg-jar "user-circle"}}
                        {{gh-trim-focus-input
                            tabindex="1"
                            type="text"
                            id="display-name"
                            name="display-name"
                            placeholder="Eg. John H. Watson"
                            autocorrect="off"
                            autocomplete="name"
                            value=(readonly signupDetails.name)
                            input=(action (mut signupDetails.name) value="target.value")
                            focus-out=(action "validate" "name")
                            data-test-input="name"
                        }}
                    </span>
                    {{gh-error-message errors=signupDetails.errors property="name"}}
                {{/gh-form-group}}

                {{#gh-form-group errors=signupDetails.errors hasValidated=signupDetails.hasValidated property="email"}}
                    <label for="email">Email address</label>
                    <span class="gh-input-icon gh-icon-mail">
                        {{svg-jar "email"}}
                        {{gh-text-input
                            tabindex="2"
                            type="text"
                            id="username"
                            name="username"
                            placeholder="Eg. john@example.com"
                            autocorrect="off"
                            autocomplete="username email"
                            value=(readonly signupDetails.email)
                            input=(action (mut signupDetails.email) value="target.value")
                            focus-out=(action "validate" "email")
                            data-test-input="email"
                        }}
                    </span>
                    {{gh-error-message errors=signupDetails.errors property="email"}}
                {{/gh-form-group}}

                {{#gh-form-group errors=signupDetails.errors hasValidated=signupDetails.hasValidated property="password"}}
                    <label for="password">Password</label>
                    <span class="gh-input-icon gh-icon-lock">
                        {{svg-jar "lock"}}
                        {{gh-text-input
                            tabindex="3"
                            type="password"
                            id="password"
                            name="password"
                            placeholder="At least 10 characters"
                            autocorrect="off"
                            autocomplete="new-password"
                            value=(readonly signupDetails.password)
                            input=(action (mut signupDetails.password) value="target.value")
                            focus-out=(action "validate" "password")
                            data-test-input="password"
                        }}
                    </span>
                    {{gh-error-message errors=signupDetails.errors property="password"}}
                {{/gh-form-group}}
            </form>

            {{gh-task-button "Create Account"
                type="submit"
                form="signup"
                defaultClick=true
                runningText="Creating"
                task=signup
                class="gh-btn gh-btn-green gh-btn-lg gh-btn-block gh-btn-icon"
                tabindex="3"}}

            <p class="main-error">{{if flowErrors flowErrors}}&nbsp;</p>
        </section>
    </div>

</div>
